<div style="height: 90vh; overflow-y: scroll ">
<div><p>益炒到家</p></div>
<!-- 子传父，子组件comp-tag-navbar传给父组件 -->
<nova-comp-tag-navbar  (newItemEvent)="addItem($event)"></nova-comp-tag-navbar>
<div *ngIf="showFood">
    
<app-comp-slideshow></app-comp-slideshow>
    <div >
        <div style="display:flex;width:100vw;height:100px;margin-top: 100px;">
            <div routerLink="/mobile-cooking/chuan" style="flex:1;text-align: center;margin-right: 18px;">
                <img class="db" src="../../../assets/川菜.jpg" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;border-radius: 50%;margin-top: -85px;margin-right: -50px;">
                 川菜</div>
            <div routerLink="/mobile-cooking/xiang" style="flex:1;text-align: center; margin-right: 18px;">
                <img class="db" src="../../../assets/湘菜.jpg" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;border-radius: 50%;margin-top: -85px;margin-right: -50px;">
                 湘菜</div>
             <div routerLink="/mobile-cooking/su" style="flex:1;text-align: center;margin-right: 18px;">
                <img class="db" src="../../../assets/苏菜.jpg" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;border-radius: 50%;margin-top: -85px;margin-right: -50px;">
                 苏菜</div>
             <div routerLink="/mobile-cooking/dong" style="flex:1;text-align: center;margin-right: 20px;">
                <img class="db" src="../../../assets/东北菜.jpg" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;border-radius: 50%;margin-top: -85px;margin-right: -50px;">
                 东北菜</div>
        </div>
        <div style="display:flex;width:100vw;height:100px;">
            <div routerLink="/mobile-cooking/xi" style="flex:1;text-align: center; margin-right: 20px;">
                <img  class="qt" src="../../../assets/西餐.jpg" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;border-radius: 50%;">
                 西餐</div>
            <div routerLink="/mobile-cooking/yue" style="flex:1;text-align: center; margin-right: 20px;">
                <img class="qt" src="../../../assets/粤菜.jpg" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;border-radius: 50%;">
                 粤菜</div>
             <div routerLink="/mobile-cooking/min" style="flex:1;text-align: center;margin-right: 20px;">
                <img class="qt" src="../../../assets/闽菜.jpg" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;border-radius: 50%;">
                 闽菜</div>
             <div routerLink="/mobile-cooking/qita" style="flex:1;text-align: center;margin-right: 20px;">
                <img class="qt" src="../../../assets/菜2.webp" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;border-radius: 50%;">
                 其他</div>
       </div>
    </div>
    <div class="rmtc" style="margin-left: 10px;">
        热门菜品
    </div>
    <div style="padding-left: 20px; display: flex; width: 490px;flex-wrap: wrap;margin-top: 10px;" >
    <app-comp-goods *ngFor="let item of foodList" [goods]="item" style="flex: 1;"></app-comp-goods>

    </div>
</div>
<div *ngIf="!showFood" style="padding-left: 20px; display: flex; width: 490px;flex-wrap: wrap;margin-top: 10px;" >

    <app-comp-goods *ngFor="let item of food" [goods]="item" style="flex: 1;"></app-comp-goods>
</div>
</div>

